<div class="wrapper">
    <div>
        <div class="box box-top">
            <!-- /.box-header -->
            <!-- form start -->
            <form id="rangeInfoForm" role="form" action="${base}/admin/rangeInfo/save" method="post">
                <input type="hidden" name="id" value="${(rangeInfo.id)!}">
                <div class="box-body">
                            <div class="form-group">
                                <label for="rangeName">Range Name</label>
                                <input type="text" value="${(rangeInfo.rangeName)!}" class="form-control" name="rangeName" id="rangeName">
                            </div>

                            <div class="form-group">
                                <label for="rangeNo">Range Code</label>
                                <input type="text" value="${(rangeInfo.rangeNo)!}" class="form-control" name="rangeNo" id="rangeNo">
                            </div>

                            <div class="form-group">
                                <label for="pathkey">Range Location</label>
                                <input type="text" value="${(rangeInfo.pathkey)!}" class="form-control" name="pathkey" id="pathkey">
                            </div>

                            <div class="form-group">
                                <label for="validPath">Verify Location</label>
                                <input type="text" value="${(rangeInfo.validPath)!}" class="form-control" name="validPath" id="validPath">
                            </div>

                            <div class="form-group">
                                <label for="rangeInfoId">ParentRange</label>
                                <select class="form-control select2" style="width: 100%;" id="rangeInfoId" name="rangeInfoId">
                                    <option value="">--select ParentRange--</option>
                                    <#list rangeInfos as rangeInfo_>
                                        <option <#if rangeInfo_.id == (rangeInfo.rangeInfoId)!0>selected</#if>
                                            value="${(rangeInfo_.id)!}">
                                        ${(rangeInfo_.rangeName)!}
                                        </option>
                                    </#list>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="rangeType">RangeType${rangeInfo.rangeType!}</label>
                                <select class="form-control select2" style="width: 100%;" id="rangeType" name="rangeType">
                                    <option value="">--please Select--</option>
                                    <option
                                        <#if (rangeInfo.rangeType)! == '0'> selected="selected"</#if> value="0">Menu Range</option>
                                    <option
                                        <#if (rangeInfo.rangeType)! == '1'> selected="selected"</#if> value="1">Action Range</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="rangeState">Status</label>
                                <!--<input type="text" value="${(rangeInfo.rangeState)!}" class="form-control" name="rangeState" id="rangeState">-->
                                <select class="form-control select2" style="width: 100%;" id="rangeState" name="rangeState">
                                    <option
                                        <#if (rangeInfo.rangeState!0) == 0> selected="selected"</#if> value="0">Common Range</option>
                                    <option
                                        <#if (rangeInfo.rangeState!0) == 1> selected="selected"</#if> value="1">Global Range</option>
                                 </select>
                            </div>

                            <div class="form-group">
                                <label for="icon">icons</label>
                                <!--<input type="text" value="${(rangeInfo.icon)!}" class="form-control" name="icon" id="icon">-->
                                <select class="form-control select2" style="width: 100%;" id="icon" name="icon">
                                    <option value="">--plase select--</option>
                                    <option <#if (rangeInfo.icon)! == 'a fa-pie-chart'> selected="selected"</#if> value="a fa-pie-chart">a fa-pie-chart</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="valid">Valid</label>
                                <select  name="valid" id="valid" class="form-control">
                                    <option value="true" <#if ((rangeInfo.valid)!true)==true> selected="selected" </#if>>----Valid----</option>
                                    <option value="false" <#if ((rangeInfo.valid)!true)==false> selected="selected" </#if>>----Invalid----</option>
                                </select>
                            </div>

                            <div class="form-group">
                                <label for="ordinal">SequenceNo</label>
                                <input type="text" value="${(rangeInfo.ordinal)!}" class="form-control" name="ordinal" id="ordinal">
                            </div>

                            <div class="box-footer">
                                <button type="button" onclick="$('#rangeInfoForm').submit();" class="btn btn-primary">Save
                                </button>
                            </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function() {
        $("#rangeInfoForm").validate({
            submitHandler:function(form){
                submitRangeInfo();
            }
        });
        //Initialize Select2 Elements
        $('.select2').select2()
    });
    function submitRangeInfo(){
        HF.ajaxFormSubmit('rangeInfoForm',function(result){
            alert("Save Success");
            document.location.reload();
        },function(e){ alert("Save Failure");});
    }
</script>
